<template>
	<!-- 选中内容 -->
	<div class="my-chart-data-pond">
		<n-card class="n-card-shallow">
			<setting-item-box name="请求名称" alone>
				<n-input size="small" :placeholder="pondData?.dataPondName || '暂无'" disabled>
					<template #prefix>
						<my-icon icon="Fish" />
					</template>
				</n-input>
			</setting-item-box>

			<setting-item-box name="接口地址" alone>
				<n-input size="small" :placeholder="pondData?.requestUrl || '暂无'" disabled>
					<template #prefix>
						<my-icon icon="Flash" />
					</template>
				</n-input>
			</setting-item-box>

			<div class="edit-text" @click="controlModel = true">
				<div class="my-absolute-center">
					<el-button type="primary">编辑</el-button>
				</div>
			</div>
		</n-card>
	</div>

	<setting-item-box :alone="true">
		<template #name>
			测试
			<n-tooltip trigger="hover">
				<template #trigger>
					<n-icon size="20" :depth="3">
						<HelpCircleOutline />
					</n-icon>
				</template>
				默认赋值给 data 字段
			</n-tooltip>
		</template>
		<n-button type="primary" ghost @click="sendHandle">
			<template #icon>
				<n-icon>
					<flash />
				</n-icon>
			</template>
			发送请求
		</n-button>
	</setting-item-box>

	<!-- 底部数据展示 -->
	<chart-data-matching-and-show :ajax="true"></chart-data-matching-and-show>

	<!-- 编辑 / 新增弹窗 -->
	<chart-data-pond-control v-model:show="controlModel" @sendHandle="sendHandle"></chart-data-pond-control>
</template>

<script setup>
import ChartDataPondControl from './components/ChartDataPondControl/index.vue';
import ChartDataMatchingAndShow from '../ChartDataMatchingAndShow/index.vue';
import { customizeHttp } from '@/api/http';
import { newFunctionHandle } from '@/utils';

// 请求配置
const controlModel = ref(false);

// 所选数据池
const pondData = computed(() => {
	const selectId = $store.chart.getTargetData.orgConfig.request.dataPondId;
	if (!selectId) return undefined;
	return $store.chart.requestDataPond.filter((item) => selectId === item.dataPondId)[0];
});

// 发送请求
async function sendHandle() {
	if (!$store.chart.getTargetData?.request) {
		msgWarning('请选择一个公共接口！');
		return;
	}
	try {
		const res = await customizeHttp(toRaw($store.chart.getTargetData.orgConfig.request));
		if (res) {
			if (!res?.data && !$store.chart.getTargetData.orgConfig.filter)
				msgWarning('您的数据不符合默认格式，请配置过滤器！');
			$store.chart.getTargetData.option.data = newFunctionHandle(
				res?.data,
				res,
				$store.chart.getTargetData.orgConfig.filter
			);
			return;
		}
		msgWarning('没有拿到返回值，请检查接口！');
	} catch (error) {
		msgWarning('数据异常，请检查参数！');
	}
}
</script>

<style scoped lang="scss">
@include b('chart-data-pond') {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	.n-card-shallow {
		&.n-card {
			:deep(.n-card__content) {
				padding: 0px;
			}
		}
		.edit-text {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
			opacity: 0;
			transition: all 0.3s;
			background-color: var(--el-mask-color-extra-light);
		}
		&:hover {
			border-color: var(--el-color-primary);
			.edit-text {
				opacity: 1;
			}
		}
	}
}
</style>
